<template>
  <div style="margin-bottom: 12px">
    <a-row :gutter="24">
      <a-col :md="22" :sm="24">
        <a-row type="flex" :gutter="24">
          <a-col :lg="6" :md="8" :sm="12">
            <a-select
              showSearch
              :filterOption="filterOption"
              placeholder="选择查询字段"
              style="width: 100%;"
              v-model="queryItem.field"
              :getPopupContainer="node=>node.parentNode"
              @select="(val,option)=>handleSelected(option,queryItem)"
            >
              <a-select-option
                :key="index"
                :value="it.value || it.field"
                v-for="(it,index) in fieldList"
              >{{ it.label || it.title }}
              </a-select-option>
            </a-select>
          </a-col>
          <a-col :lg="4" :md="8" :sm="12">
            <a-select
              placeholder="匹配规则"
              style="width: 100%"
              :value="queryItem.rule"
              :getPopupContainer="node=>node.parentNode"
              @change="handleRuleChange(queryItem, $event)"
            >
              <a-select-option value="eq">等于</a-select-option>
              <a-select-option value="like">包含</a-select-option>
              <a-select-option value="right_like">以..开始</a-select-option>
              <a-select-option value="left_like">以..结尾</a-select-option>
              <a-select-option value="in">在...中</a-select-option>
              <a-select-option value="ne">不等于</a-select-option>
              <a-select-option value="gt">大于</a-select-option>
              <a-select-option value="ge">大于等于</a-select-option>
              <a-select-option value="lt">小于</a-select-option>
              <a-select-option value="le">小于等于</a-select-option>
            </a-select>
          </a-col>
          <a-col :lg="6" :md="8" :sm="12">
            <!--判断各种输入框-->
            <a-input
              v-if="queryItem.rowType === 'input'"
              v-model="queryItem.val"
              style="width: 100%"
              :placeholder="'请输入' + queryItem.rowName"
            ></a-input>
            <a-input-number
              v-else-if="queryItem.rowType === 'input-number'"
              v-model="queryItem.val"
              style="width: 100%"
              :placeholder="'请输入' + queryItem.rowName"
            ></a-input-number>
            <a-select
              v-else-if="queryItem.rowType === 'select'"
              v-model="queryItem.val"
              style="width: 100%"
              :placeholder="'请选择' + queryItem.rowName"
            >
              <a-select-option :key="it.value" v-for="it in queryItem.options">{{ it.label }}</a-select-option>
            </a-select>
            <a-select
              v-else-if="queryItem.rowType === 'select-multiple'"
              v-model="queryItem.val"
              mode="multiple"
              style="width: 100%"
              :placeholder="'请选择' + queryItem.rowName"
            >
              <a-select-option :key="it.value" v-for="it in queryItem.options">{{ it.label }}</a-select-option>
            </a-select>
            <a-date-picker
              :showTime="{ defaultValue: queryItem.defaultTime }"
              v-else-if="queryItem.rowType === 'date'"
              :placeholder="'请选择' + queryItem.rowName"
              style="width: 100%"
              format="YYYY-MM-DD HH:mm:ss"
              v-model="queryItem.val"
            ></a-date-picker>
            <a-input v-else placeholder="请输入查询条件"></a-input>
          </a-col>
          <a-col :lg="8" :md="12" :sm="12">
            <a-row>
              <a-col :sm="8" :lg="8" :md="8" :xl="8" >
                <a-button icon="search" type="primary" @click="query">查询</a-button>
              </a-col>
              <a-col :sm="8" :lg="8" :md="8" :xl="8" >
                <a-button icon="redo" @click="reset">重置</a-button>
              </a-col>
              <a-col :sm="8" :lg="8" :md="8" :xl="8" >
                <a-button icon="search" type="dashed" @click="showModel">高级查询</a-button>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
    <w-super-query
      :showModel="isShow"
      :fieldList="fieldList"
      :saveCode = "saveCode"
      ref="BSuperQuery"
      @ok="handleSuperQuery"
    />
  </div>
</template>

<script>
import moment from 'moment'
import BSuperQuery from '@/components/BSuperQuery/BSuperQuery'
import WSuperQuery from './WSuperQuery'
import { axios } from '@/utils/request'

export default {
  name: 'MESSuperQuery',
  components: {
    BSuperQuery,
    WSuperQuery
  },
  props: {
    fieldList: {
      type: Array,
      required: true
    },
    saveCode: {
      type: String,
      default: null
    },
  },
  data () {
    return {
      isShow: false,
      queryItem: {
        rowType: '',
        rowName: '',
        rule: undefined,
        val: undefined,
        field: ''
      },
      queryParam: {}
    }
  },
  methods: {
    handleSuperQuery (type, params) {
      this.isShow = false
      this.queryParam.queryType = type
      this.queryParam.queryItems = [
        ...params,
        this.queryItem
      ]
      this.$emit('ok', this.queryParam)
    },
    showModel () {
      this.isShow = true
    },
    query () {
      if (this.queryItem.rowType === 'date') {
        this.queryItem.val = moment(this.queryItem.val).format('YYYY-MM-DD HH:mm:ss')
      }
      const queryParam = {
        queryType: 'and',
        queryItems: [{
          rowType: this.queryItem.rowType,
          rowName: this.queryItem.rowName,
          rule: this.queryItem.rule,
          val: this.queryItem.val,
          field: this.queryItem.field
        }]
      }
      this.$emit('ok', queryParam)
    },
    reset () {
      this.queryItem = {}
    },
    // 查询字段搜索
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    // 处理选择的查询字段
    handleSelected (node, item) {
      const it = this.fieldList.find(it => it.value === item.field)
      item['rowType'] = it.type
      item['rowName'] = it.label
      item['defaultTime'] = it.defaultTime

      if (it.dicUrl) {
        axios({
          url: it.dicUrl,
          method: 'GET'
        }).then(res => {
          item['options'] = res.data
          this.$forceUpdate()
        })
      }
      if (it.options) {
        item['options'] = it.options
      }
      this.$set(item, 'val', undefined)
    },
    // 搜索类型
    handleRuleChange (item, newValue) {
      this.$set(item, 'rule', newValue)
    }
  }
}
</script>

<style scoped>
</style>
